// 需求1：点击里面的a链接，让对应的盒子显示和隐藏
let a1 = document.querySelector('.register a')
let a2 = document.querySelector('.login a')
let register = document.querySelector('.register')
let login = document.querySelector('.login')
// 绑定事件
a1.onclick = function () {
    // 点击注册里面的a->登录显示，注册隐藏
    register.style.display = 'none'
    login.style.display = 'block'
}
a2.onclick = function () {
    // 点击登录里面的a->登录隐藏，注册显示
    login.style.display = 'none'
    register.style.display = 'block'
}

// 需求2：用户信息校验
let inp1 = document.querySelector('.register [ name="username"]')
let inp2 = document.querySelector('.register [ name="password"]')
let inp3 = document.querySelector('.login [ name="username"]')
let inp4 = document.querySelector('.login [ name="password"]')

// 调用
verifyInput(inp1, '用户名不能为空', '用户名长度不能小于2位或超过15位', /^[\S]{2,15}$/)
verifyInput(inp2, '密码不能为空', '密码长度不能小于6位或超过15位', /^[\S]{6,15}$/)
verifyInput(inp3, '用户名不能为空', '用户名长度不能小于2位或超过15位', /^[\S]{2,15}$/)
verifyInput(inp4, '密码不能为空', '密码长度不能小于6位或超过15位', /^[\S]{6,15}$/)


// 封装校验input的函数
function verifyInput(ele,txt1,txt2,reg) {
    // 绑定事件 - oninput/onkeyup
    ele.addEventListener('input', function () {
    //(1) 非空校验
    if (this.value.trim() == '') {
        this.nextElementSibling.style.display = 'block'
        return
    } else {
        this.nextElementSibling.style.display = txt1
    }
    //(2) 长度校验
    if(reg.test(this.value.trim())){
        this.nextElementSibling.style.display = 'none'
    } else {
        this.nextElementSibling.style.display = 'block'
        this.nextElementSibling.innerHTML = txt2
    }
} )
}

//3. 注册功能
let Regform = document.querySelector('.register form')
// 给表单注册提交事件
Regform.addEventListener('submit', function (e) {
    e.preventDefault()
    axios({
        method: 'POST',
        url: '/api/register',
        data:`username=${inp1.value}&password=${inp2.value}`
    }).then(({ data: res }) => {
        console.log(res);
        if (res.code == 0) {
            // 成功提示
            toastr.success('成功注册')
            // 触发注册中的a链接
            a1.click()
            // 重置表单
            Regform.reset()
        } 
        // if (res.code == 1) {
        //     toastr.error(res.message)
        // }
    })
})

// 4. 登录功能
let formLogin = document.querySelector('.login form')
formLogin.addEventListener('submit', function (e) {
    e.preventDefault()
    axios({
        method: 'POST',
        url: '/api/login',
        data: {
            username:inp3.value,
            password:inp4.value
        }
    }).then(({ data: res }) => {
        console.log(res);
        if (res.code == 0) {
            toastr.success('登录成功')
            // 跳转到index页面
            location.href = './index.html'
            // 保存token
            localStorage.getItem('mytoken',res.token)
        }
        } 
        
    )
})
